<template>
  <q-card flat>
    <q-card-section class="flex items-center">
      <q-icon name="stars" size="sm" color="grey-9" class="q-mr-sm" />
      <div class="text-body1 text-bold">本月最捧场客户Top10</div>
    </q-card-section>

    <q-separator />

    <q-card-section class="row justify-between">
      <q-markup-table flat bordered class="fit">
        <thead>
          <tr>
            <th class="text-center" v-for="col in columns" :key="col.field">{{ col.label }}</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="(row, idx) of rows" :key="idx">
            <td v-for="col in columns" :key="col.field" :class="[col.align, typeof col.classes === 'function' ? col.classes(row[col.field], row) : '']">{{ typeof col.format === 'function' ? col.format(row[col.field], row) : row[col.field] }}</td>
          </tr>
        </tbody>
      </q-markup-table>
    </q-card-section>
  </q-card>
</template>

<script>
import { defineComponent } from 'vue';
import { mapState } from 'pinia';
import { useStore } from 'stores/store';

export default defineComponent({
  name: 'topTenCustomer',
  props: {
    rows: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      columns: [
        { field: 'rank', label: '排名', align: 'text-center' },
        { field: 'nickname', label: '客户', align: 'text-left' },
        { field: 'money', label: '消费金额', align: 'text-right' },
        {
          field: 'type',
          label: '类型',
          align: 'text-center',
          format: val => this.dictObj.saleType && this.dictObj.saleType[val] && this.dictObj.saleType[val].label,
          classes: val => this.dictObj.saleType && this.dictObj.saleType[val] && this.dictObj.saleType[val].color
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
  },
  computed: {
    ...mapState(useStore, ['dictObj'])
  }
});
</script>
